import { Link } from 'react-router-dom';
import { posts } from '../data';
import Layout from '../components/Layout';

export default function Home() {
  const featuredPost = posts[0];
  const latestPosts = posts.slice(1);

  return (
    <Layout>
      <div className="flex items-center justify-between mb-4 border-b border-gray-200 dark:border-gray-700 relative pb-2 mt-2">
        <h3 className="uppercase text-[13px] font-semibold text-gray-600 dark:text-gray-300 tracking-wider">FEATURED POST</h3>
        <div className="absolute top-0 right-0 h-1 w-8 bg-[#0073e6]"></div>
      </div>

      {/* Featured Post */}
      <div className="bg-white dark:bg-gray-800 border border-[#cce0f5] dark:border-gray-700 p-5 rounded-sm shadow-sm mb-8 flex flex-col md:flex-row gap-6">
         <div className="w-full md:w-1/2 relative rounded overflow-hidden group block">
            <Link to={`/post/${featuredPost.slug}`}>
              <img src={featuredPost.image} alt={featuredPost.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 min-h-[250px]" />
            </Link>
         </div>
         <div className="w-full md:w-1/2 flex flex-col justify-center">
           <div className="text-[13px] text-gray-500 dark:text-gray-400 mb-3">{featuredPost.category}</div>
           <Link to={`/post/${featuredPost.slug}`}>
              <h2 className="text-2xl font-bold hover:text-[#0073e6] dark:hover:text-blue-400 mb-4 leading-tight text-gray-800 dark:text-white">
                {featuredPost.title}
              </h2>
           </Link>
           <p className="text-gray-600 dark:text-gray-300 mb-6 text-[15px] line-clamp-3">{featuredPost.excerpt}</p>
           
           <div className="flex items-center text-[13px] text-gray-500 dark:text-gray-400 space-x-4">
              <span className="flex items-center"><span className="mr-1">👤</span> {featuredPost.author}</span>
              <span className="flex items-center"><span className="mr-1">🕒</span> {featuredPost.date}</span>
           </div>
         </div>
      </div>

      {/* Latest Posts Title */}
      <div className="flex items-center mb-4 border-b border-gray-200 dark:border-gray-700 relative pb-2">
        <h3 className="uppercase text-sm font-bold text-gray-700 dark:text-gray-300">LATEST POSTS</h3>
        <div className="absolute bottom-[-1px] right-0 h-[2px] w-12 bg-[#0073e6]"></div>
      </div>

      {/* Latest Posts Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
        {latestPosts.map(post => (
          <div key={post.id} className="bg-white dark:bg-gray-800 border border-[#cce0f5] dark:border-gray-700 p-3 rounded-sm shadow-sm flex flex-col">
            <div className="relative rounded overflow-hidden mb-3 aspect-video group">
              <Link to={`/post/${post.slug}`}>
                <img src={post.image} alt={post.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                <div className="absolute top-0 left-0 bg-red-600 text-white text-xs px-2 py-1 font-bold">B+</div>
              </Link>
            </div>
            
            <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">{post.category}</div>
            <Link to={`/post/${post.slug}`} className="flex-grow">
              <h3 className="text-lg font-bold hover:text-[#0073e6] dark:hover:text-blue-400 dark:text-white mb-2 leading-tight line-clamp-3">
                {post.title}
              </h3>
            </Link>
            <p className="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">{post.excerpt}</p>
            
            <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mt-auto pt-2 border-t border-gray-100 dark:border-gray-700">
              <span className="flex items-center"><span className="mr-1">👤</span> {post.author}</span>
              <span className="flex items-center"><span className="mr-1">🕒</span> {post.date}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Pagination */}
      <div className="flex justify-center space-x-2 mb-8">
        <span className="w-8 h-8 flex items-center justify-center rounded-full bg-[#0073e6] text-white font-bold text-sm">1</span>
        <span className="w-8 h-8 flex items-center justify-center rounded-full border border-[#0073e6] text-[#0073e6] dark:text-blue-400 dark:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 cursor-pointer text-sm">2</span>
        <span className="w-8 h-8 flex items-center justify-center rounded-full border border-[#0073e6] text-[#0073e6] dark:text-blue-400 dark:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 cursor-pointer text-sm">3</span>
        <span className="w-8 h-8 flex items-center justify-center rounded-full border border-[#0073e6] text-[#0073e6] dark:text-blue-400 dark:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 cursor-pointer text-sm">4</span>
        <span className="w-8 h-8 flex items-center justify-center rounded-full border border-[#0073e6] text-[#0073e6] dark:text-blue-400 dark:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 cursor-pointer text-sm">5</span>
        <span className="w-8 h-8 flex items-center justify-center rounded-full border border-[#0073e6] text-[#0073e6] dark:text-blue-400 dark:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 cursor-pointer text-sm tracking-widest">..42</span>
        <span className="w-8 h-8 flex items-center justify-center rounded-full border border-[#0073e6] text-[#0073e6] dark:text-blue-400 dark:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 cursor-pointer text-sm">&gt;</span>
      </div>

    </Layout>
  );
}